 <template>
   <Card :shadow="shadow">
      <div class="card-name">
        <div class="name width1">角色列表</div>
      </div>
      <i-form ref="formValidate" :model="formValidate" :rules="ruleValidate" class="content-con">
        <Form-item prop="manager">
          <CheckboxGroup v-model="formValidate.manager">
            <div class="list">
              <Icon type="logo-twitter" class="padding"></Icon>
              <Checkbox size="large" label="代理"></Checkbox>
            </div>
            <div class="list">
              <Icon type="logo-twitter" class="padding"></Icon>
              <Checkbox size="large" label="系统管理"></Checkbox>
            </div>
            <div class="list">
              <Icon type="logo-twitter" class="padding"></Icon>
              <Checkbox size="large" label="财务管理"></Checkbox>
            </div>
            <div class="list">
              <Icon type="logo-twitter" class="padding"></Icon>
              <Checkbox size="large" label="运营管理"></Checkbox>
            </div>
          </CheckboxGroup>
        </Form-item>
        <Form-item class="ban-btn border-top">
          <i-button @click="handleSubmit('formValidate')" class="save" size="large">保存</i-button>
          <i-button class="save" size="large" @click="btnClick1">返回</i-button>
        </Form-item>
      </i-form>
   </Card>

 </template>
 <script>
 import axios from "../../libs/axios.js";
 export default {
   name: 'user-allot',
   props:{
     shadow: {
       type: Boolean,
       default: false
     }
   },
   data() {
     return {
       formValidate:{
         manager: []
       },
       ruleValidate:{
         manager:[
           { required: true, type: 'array', min: 1, message: '请选择至少一个', trigger: 'change' },
           { type: 'array', max: 4, message: '请选择', trigger: 'change' }
         ]
        }
     };
   },
   methods: {
     // 返回按钮
     btnClick1(){
       this.$router.push({name:'user_management'})
     },
     //表单验证
     handleSubmit () {
       this.$refs['formValidate'].validate((valid) =>{
         if (valid) {
           this.$Message.success('提交成功!');
         } else {
           this.$Message.error('表单验证失败!');
         }
       })
     }
   }
 };
 </script>
 <style lang="less">

  .list{
    display: block;
  }
  .list .padding{
    padding-right: 8px;
  }
  .border-top{
    margin-top: 30px;
    border-top: 1px solid #eee;
  }
 </style>
